<!-- 销售业绩 -->
<template>
  <div class="global-topList">
    <div class="top_wrap pt-16 pb-16 borderB-2">
      <span class="mr-8">日期</span>
      <el-date-picker
        class="update-el-datetimerange"
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        @change="onChange"
      >
      </el-date-picker>
      <span class="mr-8 pl-26">营业员</span>
      <el-select
        class="update-el-select"
        v-model="value"
        placeholder="请选择"
        clearable
        @clear="getCommissionList(params)"
        @change="onChangePersonnel"
      >
        <el-option
          v-for="item in personnelList"
          :key="item.id"
          :label="item.personnelName"
          :value="item.personnelNo"
        >
        </el-option>
      </el-select>
    </div>
    <div class="bottom_wrap pt-16">
      <el-button type="primary" icon="el-icon-search" @click="onSearch"
        >查询</el-button
      >
      <div class="table_wrap pt-16">
        <div class="left_wrap">
          <el-table
            :data="leftDataList"
            style="width: 100%"
            :header-cell-style="{
              background: '#f4f4f4',
              padding: 0,
              height: '40px'
            }"
            :cell-style="{ padding: 0, height: '26px' }"
            highlight-current-row
            height="68vh"
            @cell-click="hanldeRowClikc"
          >
            <el-table-column prop="personnelName" label="营业员" width="100">
            </el-table-column>
            <el-table-column prop="sellTime" label="日期" width="100">
              <template slot-scope="scope">
                <span>{{ scope.row | formatTime('sellTime') }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="number" label="数量" width="80">
            </el-table-column>
            <el-table-column prop="sellMoney" label="售价金额">
            </el-table-column>
            <el-table-column prop="sellingPrice" label="销售金额">
            </el-table-column>
            <el-table-column prop="commissionMoney" label="业绩提成">
            </el-table-column>
          </el-table>
        </div>
        <div class="right_wrap">
          <el-table
            :data="rightDataList"
            style="width: 100%"
            :header-cell-style="{
              background: '#f4f4f4',
              padding: 0,
              height: '40px'
            }"
            :cell-style="{ padding: 0, height: '26px' }"
            height="68vh"
          >
            <el-table-column prop="sellSequence" label="单号" width="150">
            </el-table-column>
            <el-table-column prop="sellTime" label="日期" width="150">
              <template slot-scope="scope">
                <span>{{ scope.row | formatTime('sellTime') }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="personnelName" label="营业员">
            </el-table-column>
            <el-table-column prop="styleNumber" label="款号" width="130">
            </el-table-column>
            <el-table-column prop="colorName" label="颜色"> </el-table-column>
            <el-table-column prop="size" label="尺码"> </el-table-column>
            <el-table-column prop="number" label="数量"> </el-table-column>
            <el-table-column prop="sellingPrice" label="售价金额">
            </el-table-column>
            <el-table-column prop="discount" label="折数"> </el-table-column>
            <el-table-column prop="sellingPrice" label="销售金额">
            </el-table-column>
            <el-table-column prop="commissionMoney" label="业绩提成">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { query_vip_personnel as getPersonnel } from '@/request/store/store_baseInfo_request'
import { getCommissionList } from '@/request/store/K_SalesPerformance'
import { getShop } from '../../../network/shop'
import { changeDate, deepClone } from '../../../util/util'

export default {
  name: 'K_SalesPerformance',
  data() {
    return {
      value1: [],
      value2: [],
      personnelList: [],
      value: '',
      leftDataList: [],
      rightDataList: [], // 要展示的数据
      rightObjectList: {}, // 右侧数据
      tempRightObjectList: {}, // 临时保存右侧数据
      tableData: [],
      sdNo: null,
      params: {
        // startTime: '',
        // endTime: '',
        // personnelNo: ''
      }
    }
  },
  created() {
    this.getShop() // 获取当前直营店编号和名称
  },
  methods: {
    // 获取当前直营店编号和名称
    async getShop() {
      const { data } = await getShop()
      if (data && data.code === 200) {
        this.sdNo = data.data.headquartersNo
        this.allQuest()
      }
    },
    allQuest() {
      const quertData = {
        directSaleNo: this.sdNo || null
      }
      this.getPersonnel(quertData) // 查询营业员
      this.getCommissionList()
    },
    // 查询营业员
    async getPersonnel(quertData) {
      const { data } = await getPersonnel(quertData)
      if (data && data.code === 200) {
        this.personnelList = data.data
      }
    },
    // 销售业绩数据
    async getCommissionList(params) {
      console.log(params)
      const { data } = await getCommissionList(params)
      this.leftDataList = []
      this.rightDataList = []
      this.tempRightObjectList = {}
      if (data && data.code === 200) {
        this.leftDataList = data.data.total
        this.tempRightObjectList = data.data.info
        // console.log(data.data, '销售业绩数据')
      }
    },
    // 每个数据的详情
    hanldeRowClikc(row) {
      let tempRightObjectList = deepClone(this.tempRightObjectList)
      let personnelNo = row.personnelNo
      let sellTime = row.sellTime && row.sellTime.split('T')[0]
      this.rightDataList = tempRightObjectList[personnelNo + sellTime]
    },
    // 查询
    onSearch() {
      // console.log(this.params)
      this.getCommissionList(this.params)
    },
    // 选择营业员
    onChangePersonnel(e) {
      // if (!e) return
      this.params.personnelNo = e
    },
    onChange(date) {
      if (date) {
        let startTime = date[0]
        let endTime = date[1]
        // this.params.startTime = changeDate(`${startTime} 00:00:00`)
        // this.params.endTime = changeDate(`${endTime} 23:59:59`)
        this.params.startTime = `${startTime} 00:00:00`
        this.params.endTime = `${endTime} 23:59:59`
        // console.log(e)
        // console.log(this.params)
      } else {
        if (!this.params.personnelNo) {
          this.getCommissionList()
        } else {
          let quertData = {
            personnelNo: this.params.personnelNo
          }
          this.getCommissionList(quertData)
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.table_wrap {
  display: flex;
  .left_wrap {
    padding-right: 20px;
    width: 50%;
    border-right: 2px solid #f4f4f4;
  }
  .right_wrap {
    padding-left: 20px;
    width: 50%;
  }
}
</style>
